/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="item">
    <div class="item-main">
      <div class="border"></div>
      <div class="item-content"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {}
};
</script>

<style lang='less' scoped>
@import "../../utils/theme.less";
.item {
  padding: 5px;
  width: 100%;
  height: 33.3%;
  box-sizing: border-box;
  .item-main {
    width: 100%;
    height: 100%;
    position: relative;
    .item-content {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      .out-frame(@d-primary, @d-primary, 3px, 1.2vw);
      z-index: 2;
    }
    .border {
      z-index: 1;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border: 1px solid @d-primary;
      background: rgba(0, 183, 229, 0.1);
    }
  }
}
</style>
